<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

</html>

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 本页面对应css -->
    <link rel="stylesheet" th:href="@{/css/showPage5.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>

    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>

    <style>
        .sixLink{
            position: absolute;
            top: 5px;
            right: 5px;
            height: 20px;
        }
        .sixLink > a{
            padding-left: 3px;
            padding-right: 3px;
            font-size: 15px;
            text-decoration : none;
        }
        body,html{
            width: 100%;
            min-width: 1070px;
            min-height: 700px;
        }

        html{
            /*1rem=100px*/
            font-size: 625%;
        }

        body{
            background: #0c1226!important;
        }
    </style>
</head>


<body>
<div class="row-fluid">
    <div id="content" class="span10" style="width: 100%;">
        <div class="sixLink">
            <a href="/multipower/index" style="color: white;">首页</a>
            <a href="#" onclick="checkStatus()" style="color: white;">能耗态势</a>
            <a href="/multipower/showpage3" style="color: white;">建模演示</a>
            <a href="/multipower/showpage5" style="color: white;">模型对比</a>
            <a href="/multipower/showpage4" style="color: white;">工况对比</a>
            <!--            <a href="/multipower" target="_blank" style="color: white;">建模后台</a>-->
        </div>
        <div class="app" id="app" v-cloak>
            <div class="body">
                <div class="box-item left-items">
                    <div class="left-energy-graph">
                        <div class="item-top-tilte">能量实时/预测曲线</div>
                        <div class="top-control-btn">
                            <div class="left-control">
                                <el-date-picker v-model="energy.start_date" type="date" placeholder="开始日期"
                                                size="small" value-format="yyyy-MM-dd" readonly>
                                </el-date-picker>
                                <el-date-picker v-model="energy.end_date" type="date" placeholder="截止日期"
                                                size="small" value-format="yyyy-MM-dd" readonly>
                                </el-date-picker>
                                <el-select v-model="energy.source_mode" placeholder="源模型" size="small" id="energyGraphSource" disabled>
                                    <el-option v-for="item in energy.source_modes" :key="item.modelVersion"
                                               :label="item.modelName" :value="item.modelVersion">
                                        <el-tooltip placement="right-end"
                                                    effect="light"
                                                    :content="item.modelInfo">
                                            <el-button type="text" style="width:100%;color:black;text-align: left">
                                                {{item.modelName}}
                                            </el-button>
                                        </el-tooltip>
                                    </el-option>
                                </el-select>
                                <el-select v-model="energy.target_mode" placeholder="目标模型" size="small" id="energyGraphTarget" disabled>
                                    <el-option v-for="item in energy.source_modes" :key="item.modelVersion"
                                               :label="item.modelName" :value="item.modelVersion">
                                        <el-tooltip placement="right-end"
                                                    effect="light"
                                                    :content="item.modelInfo">
                                            <el-button type="text" style="width:100%;color:black;text-align: left">
                                                {{item.modelName}}
                                            </el-button>
                                        </el-tooltip>
                                    </el-option>
                                </el-select>
                            </div>
                            <el-button type="primary" size="small" @click="energyGen" disabled>生成数据</el-button>
                        </div>
                        <div class="tag-container">
                            <el-tag  class="tag-style" v-if="energy.analyseValue != ''">{{energy.source_mode_name}}准确率:
                                {{energy.analyseValue}}</el-tag>
                            <el-tag  class="tag-style" v-if="energy.analyseValue1 != ''">{{energy.target_mode_name}}准确率:
                                {{energy.analyseValue1}}</el-tag>
                        </div>
                        <div id="energyGraph" class="energy-graph"></div>
                    </div>
                </div>
                <div class="box-item right-items">
                    <div class="right-power-graph">
                        <div class="item-top-tilte">电量实时/预测曲线</div>
                        <div class="top-control-btn">
                            <div class="left-control">
                                <el-date-picker v-model="power.start_date" type="date" placeholder="开始日期"
                                                size="small" value-format="yyyy-MM-dd" readonly>
                                </el-date-picker>
                                <el-date-picker v-model="power.end_date" type="date" placeholder="截止日期"
                                                size="small" value-format="yyyy-MM-dd" readonly>
                                </el-date-picker>
                                <el-select v-model="power.source_mode" placeholder="源模型" size="small" id="eleGraphSource" disabled>
                                    <el-option v-for="item in power.source_modes" :key="item.modelVersion"
                                               :label="item.modelName" :value="item.modelVersion">
                                        <el-tooltip placement="left"
                                                    effect="light"
                                                    :content="item.modelInfo">
                                            <el-button type="text" style="width:100%;color:black;text-align: left">
                                                {{item.modelName}}
                                            </el-button>
                                        </el-tooltip>
                                    </el-option>
                                </el-select>
                                <el-select v-model="power.target_mode" placeholder="目标模型" size="small" id="eleGraphTarget" disabled>
                                    <el-option v-for="item in power.source_modes" :key="item.modelVersion"
                                               :label="item.modelName" :value="item.modelVersion">
                                        <el-tooltip placement="left"
                                                    effect="light"
                                                    :content="item.modelInfo">
                                            <el-button type="text" style="width:100%;color:black;text-align: left">
                                                {{item.modelName}}
                                            </el-button>
                                        </el-tooltip>
                                    </el-option>
                                </el-select>
                            </div>
                            <el-button type="primary" size="small" @click="powerGen" disabled>生成数据</el-button>
                        </div>
                        <div class="tag-container">
                            <el-tag  class="tag-style" v-if="power.analyseValue != ''">{{power.source_mode_name}}准确率:
                                {{power.analyseValue}}</el-tag>
                            <el-tag  class="tag-style" v-if="power.analyseValue1 != ''">{{power.target_mode_name}}准确率:
                                {{power.analyseValue1}}</el-tag>
                        </div>
                        <div id="powerGraph" class="power-graph"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/time.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script th:src="@{/js/tools.js}"></script>
<script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
<script th:inline="javascript" th:src="@{/js/vue.js}"></script>


<script th:src="@{/js/elementui/index.js}"></script>

<script>
    // detectCallback();
</script>
<script>

    //rem做响应式布局
    (function () {
        var doc = document
        var win = window
        var docEl = doc.documentElement
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var recalc = function () {
            var clientWidth = docEl.clientWidth
            if (!clientWidth) return
            // // 如果小于1000则rem不变化，如果超过1000则等比例变化
            if (clientWidth <= 1000) {
                clientWidth = 1000
            }
            // 设置根元素font-size大小
            docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
        }
        // 屏幕大小改变，或者横竖屏切换时，触发函数
        win.addEventListener(resizeEvt, recalc, false)
        // 文档加载完成时，触发函数
        doc.addEventListener('DOMContentLoaded', recalc, false)
    })();

    let getNumParam = val => { return isNumber(val) ? val : "" }
    let BASE_URL = ""
    function reDraw(id, option) {
        let elem = document.getElementById(id)
        elem.removeAttribute("_echarts_instance_");
        let mychart = echarts.init(document.getElementById(id));
        mychart.setOption(option, true);
    }

    function drawEnChart(data, enChart_) {
        var enChart = echarts.init(document.getElementById(enChart_));
        $.ajax({
            type: "POST",
            url: "/multipower/model/energy/compare",
            contentType: "application/json",
            dataType: "json",
            async: true,
            data: JSON.stringify(data),
            success: function (data) {
                if (data.status != 200) {
                    // layer.alert(data.msg, {
                    layer.alert("无实际值，继续对比会产生错误", {
                        icon: 5,
                        title: "错误"
                    });
                    return;
                }
                if (enChart != null && enChart != "" && enChart != undefined) {
                    enChart.dispose();
                }
                console.log(data)
                option1.series[0].data = data.data.sourceList;
                option1.series[1].data = data.data.targetList;
                option1.series[2].data = data.data.historyList;
                legend = {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                    orient: 'horizontal',
                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'center',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: '30',
                    data:[vm.energy.source_mode_name+'值',vm.energy.target_mode_name+'值','实际值'],
                    textStyle: {
                        //标题颜色
                        color: "rgba(251, 251, 251, 1)"
                    },
                };
                option1.legend = legend;
                option1.series[0].name = vm.energy.source_mode_name+'值';
                option1.series[1].name = vm.energy.target_mode_name+'值';
                option1.series[2].name = "实际值";
                option1.xAxis.data = data.data.dateList;
                option1.xAxis.axisLabel.interval = Math.ceil(data.data.dateList.length / 7) - 1;
                enChart = echarts.init(document.getElementById(enChart_));
                enChart.setOption(option1);
                console.log(option1);
                vm.energy.analyseValue=data.data.analyseValues[0];
                vm.energy.analyseValue1=data.data.analyseValues[1];
            },
            error: function (data) {
                layer.alert(data.msg, {
                    icon: 5,
                    title: "错误"
                });
                return;
            }
        })
    }

    function drawEleChart(data, eleChart_) { //电量，冷热量折线图
        var eleChart = echarts.init(document.getElementById(eleChart_));
        $.ajax({
            type: "POST",
            url: "/multipower/model/electric/compare",
            contentType: "application/json",
            dataType: "json",
            async: true,
            data: JSON.stringify(data),
            success: function (data) {
                if (data.status != 200) {
                    // layer.alert(data.msg, {
                    layer.alert("无实际值，继续对比会产生错误！", {
                        icon: 5,
                        title: "错误"
                    });
                    return;
                }
                if (eleChart != null && eleChart != "" && eleChart != undefined) {
                    eleChart.dispose();
                }
                console.log(data)
                option1.series[0].data = data.data.sourceList;
                option1.series[1].data = data.data.targetList;
                option1.series[2].data = data.data.historyList;
                legend = {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                    orient: 'horizontal',
                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'center',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: '30',
                    data: [vm.power.source_mode_name+'值',vm.power.target_mode_name+'值','实际值'],
                    textStyle: {
                        //标题颜色
                        color: 'rgba(251, 251, 251, 1)'
                    },
                };
                option1.legend = legend;
                option1.series[0].name = vm.power.source_mode_name+'值';
                option1.series[1].name = vm.power.target_mode_name+'值';
                option1.series[2].name = "实际值";
                option1.xAxis.data = data.data.dateList;
                option1.xAxis.axisLabel.interval = Math.ceil(data.data.dateList.length / 7) - 1;
                eleChart = echarts.init(document.getElementById(eleChart_));
                eleChart.setOption(option1);
                console.log(option1);
                vm.power.analyseValue=data.data.analyseValues[0];
                vm.power.analyseValue1=data.data.analyseValues[1];
            },
            error: function (data) {
                layer.alert(data.msg, {
                    icon: 5,
                    title: "错误"
                });
                return;
            }
        })
    }

    var option1 = {

        title: {
            // text: '小时能量预测',
            // subtext: "明日能量",
            subtextStyle: {
                color: "rgba(251, 251, 251, 1)",
                fontSize: 20
            },
            x: '80',
            padding: [0, 0, 0, 50],
            textStyle: {
                color: 'rgba(251, 251, 251, 1)',
                fontSize: '16',
                fontWeight: '500'
            },
        },
        animation: false,
        // animationDuration:15000,

        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: '30',
            data: ['当前模型值', '实际值', '所选模型值'],
            textStyle: {
                //标题颜色
                color: "rgba(251, 251, 251, 1)"
            },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '26%', // 等价于 y: '16%'
            left: '7%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: 'rgba(251, 251, 251, 1)'
                }
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
                rotate: -60, // 旋转角度
                interval: 1,//设置X轴数据间隔几个显示一个，为0表示都显示
                // formatter: function (value) {
                //     return value.split('').join('\n');
                // }//设置坐标轴横轴数据垂直显示
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
            ]
        },

        yAxis: {
            name: 'KWh',
            type: 'value',
            // min:0, // 设置y轴刻度的最小值
            // max:1800,  // 设置y轴刻度的最大值
            splitNumber: 9, // 设置y轴刻度间隔个数
            axisLine: {
                lineStyle: {
                    // 设置y轴颜色
                    color: 'rgba(251, 251, 251, 1)'
                }
            },
        },

        series: [
            {
                name: "实际值",
                data: [1032, 952, 391, 1434, 1220, 1330, 1320,
                    815, 1900, 701, 1900, 2200, 1700,
                    1200, 920, 1300, 1400, 2100, 1700, 930,
                    890, 1910, 301, 510],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            {
                name: '当前模型值',
                data: [890, 932, 401, 1934, 1490, 1230, 1390,
                    810, 940, 700, 1800, 1290, 1600,
                    1200, 900, 1700, 1400, 1500, 800, 950,
                    810, 1400, 401, 500],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'yellow', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            {
                name: '所选模型值',
                data: [290, 132, 421, 1434, 1410, 1130, 1890,
                    810, 940, 700, 1800, 1290, 1600,
                    1200, 1000, 1100, 1300, 1560, 800, 950,
                    810, 1600, 801, 900],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },

        ],

        color: ['#04dff9', 'rgb(40,140,255)', 'rgb(231,186,8)']
    };

    var option2 = {

        title: {
            // text: '小时能量预测',
            // subtext: "明日能量",
            subtextStyle: {
                color: "rgba(251, 251, 251, 1)",
                fontSize: 20
            },
            x: '80',
            padding: [0, 0, 0, 50],
            textStyle: {
                color: "rgba(251, 251, 251, 1)",
                fontSize: '16',
                fontWeight: '500'
            },
        },
        animation: false,
        // animationDuration:15000,

        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: '30',
            data: ['当前模型值1', '实际值1', '所选模型值1'],
            textStyle: {
                //标题颜色
                color: "rgba(251, 251, 251, 1)"
            },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '26%', // 等价于 y: '16%'
            left: '7%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: "rgba(251, 251, 251, 1)"
                }
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
                rotate: 0, // 旋转角度
                interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
            },
            show:true,
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
            ]
        },

        yAxis: {
            name: 'KWh',
            type: 'value',
            // min:0, // 设置y轴刻度的最小值
            // max:1800,  // 设置y轴刻度的最大值
            splitNumber: 9, // 设置y轴刻度间隔个数
            axisLine: {
                lineStyle: {
                    // 设置y轴颜色
                    color: "rgba(251, 251, 251, 1)"
                }
            },
        },

        series: [
            {
                name: "实际值",
                data: [1032, 952, 391, 1434, 1220, 1330, 1320,
                    815, 1900, 701, 1900, 2200, 1700,
                    1200, 920, 1300, 1400, 2100, 1700, 930,
                    890, 1910, 301, 510],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            {
                name: '当前模型值',
                data: [890, 932, 401, 1934, 1490, 1230, 1390,
                    810, 940, 700, 1800, 1290, 1600,
                    1200, 900, 1700, 1400, 1500, 800, 950,
                    810, 1400, 401, 500],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'yellow', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            {
                name: '所选模型值',
                data: [290, 132, 421, 1434, 1410, 1130, 1890,
                    810, 940, 700, 1800, 1290, 1600,
                    1200, 1000, 1100, 1300, 1560, 800, 950,
                    810, 1600, 801, 900],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red', // 拐点边框颜色
                        lineStyle: {
                            width: 3, // 设置线宽
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },

        ],

        color: ['rgb(255,130,0)', 'rgb(40,140,255)', 'rgb(218,0,20)']
    };

    window.addEventListener("resize", function () {
        var eleChart = echarts.init(document.getElementById('energyGraph')); //电量图
        var hotChart = echarts.init(document.getElementById('powerGraph')); //能量图
        eleChart.resize();
        hotChart.resize();
    });
</script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            options: {},
            energy: {
                start_date: '2021/07/01',
                end_date: '2021/09/30',
                source_mode: 'YC1008_new1',
                target_mode: 'YC1008_old',
                source_modes: [],
                source_mode_name:'',
                target_mode_name:'',
                analyseValue:'',
                analyseValue1:'',
            },
            power: {
                start_date: '2021/07/01',
                end_date: '2021/09/30',
                source_mode: 'YC1737_new1',
                target_mode: 'YC1737_old',
                source_modes: [],
                source_mode_name:'',
                target_mode_name:'',
                analyseValue:'',
                analyseValue1:'',
            },
            BASE_URL: ""
        },
        created() {
            // var eleData = {
            //     "deviceCode": "yc1008",
            //     "startTime": "2020-10-12",
            //     "endTime": "2020-10-17",
            //     "sourceModel": 44,
            //     "targetModel": 45
            // }
            // var enData = {
            //     "deviceCode": "yc1737",
            //     "startTime": "2020-10-12",
            //     "endTime": "2020-10-17",
            //     "sourceModel": 46,
            //     "targetModel": 47
            // }
            // drawEnChart(enData, 'energyGraph')
            // drawEleChart(eleData, 'powerGraph')
            this.getAllMode()
        },
        methods: {
            energyGen: function () {
                that.energy.source_mode_name = $("#energyGraphSource").val();
                that.energy.target_mode_name = $("#energyGraphTarget").val();
                let startTime = new Date(that.energy.start_date);
                let endTime = new Date(that.energy.end_date);
                let source_modes = that.energy.source_modes;
                let source_mode_version = "";
                for(let i = 0; i < source_modes.length; i++){
                    if(that.energy.source_mode === source_modes[i].modelName){
                        source_mode_version = source_modes[i].modelVersion;
                    }
                }
                let target_mode_version = "";
                for(let i = 0; i < source_modes.length; i++){
                    if(that.energy.target_mode === source_modes[i].modelName){
                        target_mode_version = source_modes[i].modelVersion;
                    }
                }
                var data = {
                    "startTime": startTime,
                    "endTime": endTime,
                    "sourceModel": source_mode_version,
                    "targetModel": target_mode_version,
                };
                // console.log("data");
                // console.log(data);
                drawEnChart(data, 'energyGraph')
            },
            powerGen: function () {
                that.power.source_mode_name = $("#eleGraphSource").val();
                that.power.target_mode_name = $("#eleGraphTarget").val();
                let startTime = new Date(that.power.start_date);
                let endTime = new Date(that.power.end_date);
                let source_modes = that.power.source_modes;
                let source_mode_version = "";
                for(let i = 0; i < source_modes.length; i++){
                    if(that.power.source_mode === source_modes[i].modelName){
                        source_mode_version = source_modes[i].modelVersion;
                    }
                }
                let target_mode_version = "";
                for(let i = 0; i < source_modes.length; i++){
                    if(that.power.target_mode === source_modes[i].modelName){
                        target_mode_version = source_modes[i].modelVersion;
                    }
                }
                var data = {
                    "startTime": startTime,
                    "endTime": endTime,
                    "sourceModel": source_mode_version,
                    "targetModel": target_mode_version,
                }
                drawEleChart(data, 'powerGraph');
            },
            getAllMode: function () {
                that = this
                $.ajax({
                    type: "POST",
                    url: that.BASE_URL + "/multipower/model/electric/getall",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.status == 200) {
                            that.power.source_modes = data.data;
                            console.log("that.power.source_modes:",that.power.source_modes);
                            that.powerGen();
                        } else {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    },
                    failure: function (data) {
                        layer.alert(data.msg, {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })
                $.ajax({
                    type: "POST",
                    url: that.BASE_URL + "/multipower/model/energy/getall",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.status == 200) {
                            that.energy.source_modes = data.data;
                            console.log("that.energy.source_modes:",that.energy.source_modes);
                            that.energyGen();
                        } else {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    },
                    failure: function (data) {
                        layer.alert(data.msg, {
                            icon: 5,
                            title: "提示"
                        });
                    }
                });

            },
            login: function () {
                that = this

                //20210401
                var url = "";
                //get结果赋值给变量
                // 获取配置文件url地址
                $.ajax({
                    type: "GET",
                    url: "/multipower/url/get/name",
                    dataType: "json",
                    //注意要异步实现
                    async: false,
                    success: function (data) {
                        if (data.error == undefined) {
                            url = data.url
                        }
                    }
                });

                $.ajax({
                    type: "POST",
                    /* url: "http://139.210.5.22:10103/permissions/controlPermission", */
                    // 吉林内网使用
                    /* url: "http://192.168.10.11:8080/permissions/controlPermission", */
                    // url: BASE_URL + "/multipower/manager/checkManager",
                    //传递变量url
                    url: url,
                    dataType: "json",
                    data: {
                        "username": this.username,
                        "password": this.password
                    },
                    async: true,
                    success: function (data) {
                        // 如果权限校验通过：允许改变模式，并且保存模式
                        if (data.errorCode == null) {
                            layer.alert("权限验证通过!", {
                                icon: 1,
                                title: "提示"
                            });
                            that.changeModeData()

                            that.isShow = false;
                        } else {
                            // 如果权限校验失败：提示，不保存模式
                            layer.alert(data.errorCode.rtnString, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    }
                })
            },
            reset: function () {
                // 点击取消校验时，将选择的模式改回旧模式
                this.selected = this.preselected

                this.isShow = false
            },
            switchMode: function () {
                if (this.selected != this.preselected) {
                    this.username = ''
                    this.password = ''
                    this.isShow = true
                }
            },
            getModeData: function () {
                that = this
                $.ajax({
                    type: "POST",
                    url: BASE_URL + "/multipower/strategyJL/viewLastestMultiMode",
                    dataType: "json",
                    data: {
                        "graphId": that.graphId,
                        "remark": "1"
                    },
                    async: true,
                    success: function (data) {
                        // console.log("success")
                        if (data.multimode == null) {
                            that.graphId = that.graphId
                            that.selected = '1001'
                            that.preselected = '1001'
                            that.current_mode = '1001'
                        } else {
                            that.graphId = data.multimode.graphId
                            that.selected = data.multimode.strategyType
                            that.preselected = data.multimode.strategyType
                            that.current_mode = data.multimode.strategyType
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                    }
                })
            },
            changeModeData: function () {
                that = this
                $.ajax({
                    type: "POST",
                    url: BASE_URL + "/multipower/strategyJL/saveMultiMode",
                    dataType: "json",
                    data: {
                        "graphId": that.graphId,
                        "remark": "1",
                        "strategyType": that.selected
                    },
                    async: true,
                    success: function (data) {
                        // 成功之后调用getModeData
                        that.getModeData()
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                    }
                })
            },
            filterDate: function (start, end) {
                if (start - end >= 0) {
                    this.$message({
                        type: 'error',
                        message: '结束日期应在开始日期之后!'
                    });
                    return false;
                }
                return true;
            }
        }
    });
</script>

</body>

</html>